{% extends "bootstrap/base.html"  %}
{%- block head %}
    <title>ToDoList</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
 
    {%- block styles %}
    <!-- Bootstrap -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link rel="stylesheet"  href="{{url_for('static', filename='todolist.css')}}"> 
    {%- endblock styles %}
{%- endblock head %}
{% block body -%}

{% block navbar %}

        <nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 5px;">
          <div class="container" style="width: 90%;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/" style="color: black;">ToDoList</a>
            </div>
    
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li id="todolist" class="active"><a href="/"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                <li id="technolgy" ><a href="/todolist/add"><span class="glyphicon glyphicon-tint"></span> 添加计划</a></li>
                <!-- <li id="life" ><a href="/todolist/search"> <span class="glyphicon glyphicon-search"></span> Search Task</a></li> -->
                <li id="about"><a href="/todolist/about"> <span class="glyphicon glyphicon-info-sign"></span> 关于</a></li>
                <li  style="margin-left:100px">
                        <form class="navbar-form navbar-left" role="search" action="/" method="get">
                            <div class="form-group">
                                <input type="text" class="form-control" name="query" placeholder="Search">
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                </li>
              </ul>

              <ul class="nav navbar-nav navbar-right" >
                {% if session['username'] %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                            <span class="glyphicon glyphicon-user "></span> 
                            欢迎 {{ session['username'] }} 
                            <b class="caret"></b> 
                        </a>
                        
                        <ul class="dropdown-menu">
                            <li><a data-toggle="modal" data-target="" href="/user/logout"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a  href="/user/login"><span class="glyphicon glyphicon-user"></span> 登录 </a></li>
                    <li><a href="/user/register"><span class="glyphicon glyphicon-log-in"></span> 注册</a></li>
                {% endif %}
                </ul>
            </div>
          </div>
        </nav>
    {%- endblock navbar %}

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}" style="text-align: center;width: 100%; margin-bottom: 5px;">
                        <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                        <strong>{{ message }}</strong>
                    </div>
                {% endfor %}
        {% endif %}
    {% endwith %}
                
                    
    {% block content %}
    {% endblock content%}

    {% block scripts %}
        <script src="/static/js/jquery-3.5.1.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/moment.min.js"></script>
        <script src="/static/js/bootstrap-datepicker.min.js"></script>
      
        {% block myscripts %}
        {% endblock myscripts %}
    {%- endblock scripts %}
 
{%- endblock body %}